<!--
 * @Author: tangyongxin 1463148307@qq.com
 * @Date: 2024-01-31 20:42:09
 * @LastEditors: tangyongxin 1463148307@qq.com
 * @LastEditTime: 2024-03-04 11:22:28
 * @FilePath: \patrol_front\src\views\index_v1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-editor-container">

    <div class="user-info">
      <div class="info">
        <div class="head-image">
          <img :src="avatar" alt="">
        </div>
        <div class="person-info">
          <h3>Hi, {{ name }}</h3>
          <label>{{ deptName }}</label>
        </div>
      </div>
      <div class="poject-info">
        <div class="poject-image">
          <img src="../../assets/images/icon-poject.png" alt="">
        </div>
        <div class="person-info">
          <h3>293</h3>
          <label>项目总数</label>
        </div>
        <div class="person-chart">
          <div class="chart">
            <annular-chart />
          </div>
          <div class="person-info">
            <h3>76</h3>
            <label>项目到期数</label>
          </div>
        </div>
      </div>
      <div class="poject-info">
        <div class="poject-image">
          <img src="../../assets/images/icon-device.png" alt="">
        </div>
        <div class="person-info">
          <h3>293</h3>
          <label>设备总数</label>
        </div>
        <div class="person-chart">
          <div class="chart">
            <annular-chart />
          </div>
          <div class="person-info">
            <h3>76</h3>
            <label>设备到期数</label>
          </div>
        </div>
      </div>
    </div>
    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

    <el-row style="margin-bottom:16px;" :gutter="32">
      <!-- <line-chart :chart-data="lineChartData" /> -->
      <el-col :xs="24" :sm="24" :lg="11">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span class="header-title">设备统计</span>
            <div class="device-num">
              <span>设备总数：</span>
              <label>1194</label>
            </div>
          </div>
          <bar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="13">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span class="header-title">工单统计</span>
            <div class="device-num">
              <el-form :inline="true" size="mini">
                <el-form-item label="维修人员">
                  <el-select>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间">
                  <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="data-chart">
            <div class="legend">
              <p>
                <span class="legend-color"></span>
                <span class="font">待处理</span>
                <span class="legend-num">50%</span>
                <span class="font">6345</span>
                <span class="unit">条</span>
              </p>
              <p>
                <span class="legend-color" style="background: #5AD8A6;"></span>
                <span class="font">待处理</span>
                <span class="legend-num" style="color: #5AD8A6;background: rgba(90,216,166,0.2);">50%</span>
                <span class="font">6345</span>
                <span class="unit">条</span>
              </p>
              <p>
                <span class="legend-color" style="background: #FF4C55;"></span>
                <span class="font">待处理</span>
                <span class="legend-num" style="color: #FF4C55;background: rgba(255,76,85,0.2);">50%</span>
                <span class="font">6345</span>
                <span class="unit">条</span>
              </p>
              <p>
                <span class="legend-color" sttle></span>
                <span class="font">待处理</span>
                <span class="legend-num">50%</span>
                <span class="font">6345</span>
                <span class="unit">条</span>
              </p>
            </div>
            <div class="chart">
              <pie-chart />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-bottom:16px;">
      <div class="chart-wrapper">
        <div class="chart-header">
          <span class="header-title">维修统计</span>
          <div class="device-num">
            <el-form :inline="true" size="mini">
              <el-form-item label="维修人员">
                <el-select>
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <span>维修人员总数：</span>
            <label>293</label>
          </div>
        </div>
        <line-chart :chart-data="lineChartData" />
      </div>
    </el-row>

    <el-row>
      <div class="chart-wrapper">
        <div class="chart-header">
          <span class="header-title">待处理工单</span>
          <div class="device-num">
            <el-form :inline="true" size="mini">
              <el-form-item label="维修人员">
                <el-select>
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <span>查看全部 ></span>
          </div>
        </div>
        <el-table v-loading="loading" :data="list">
          <el-table-column prop="code" label="工单编号" min-width="200" align="center"></el-table-column>
          <el-table-column prop="code" label="设备名称" min-width="200" align="center"></el-table-column>
          <el-table-column prop="code" label="维修人员" min-width="120" align="center"></el-table-column>
          <el-table-column prop="code" label="维修人员电话" min-width="120" align="center"></el-table-column>
          <el-table-column prop="code" label="工单状态" min-width="120" align="center"></el-table-column>
          <el-table-column prop="code" label="发布日期" min-width="120" align="center"></el-table-column>
          <el-table-column prop="code" label="截止日期" min-width="120" align="center"></el-table-column>
        </el-table>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import PanelGroup from '../dashboard/PanelGroup'
import LineChart from '../dashboard/LineChart'
import RaddarChart from '../dashboard/RaddarChart'
import PieChart from '../dashboard/PieChart'
import BarChart from '../dashboard/BarChart'
import AnnularChart from '../dashboard/AnnularChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DataIndex',  
  components: {
    // PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    AnnularChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }
      ],
      value1: '',
      list: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'deptName'
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    getList() {
      this.loading = true;
      this.list = [
        { code: 123123123123 },
        { code: 123123123123 },
        { code: 123123123123 },
        { code: 123123123123 },
        { code: 123123123123 },
        { code: 123123123123 }
      ]
      this.loading = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    border-radius: 8px;

    .chart-header {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-title {
        padding-left: 4px;
        font-size: 16px;
        line-height: 16px;
        border-left: 3px solid #3C7EFF;

      }

      .device-num {
        display: flex;
        align-items: center;
        float: right;

        span {
          font-size: 14px;
          color: #3C7EFF;
          line-height: 20px;
          text-align: right;
          font-style: normal;
        }

        label {
          font-weight: bold;
          font-size: 28px;
          color: #3C7EFF;
          line-height: 32px;
          text-align: right;
          font-style: normal;
        }

        ::v-deep .el-form-item--mini.el-form-item {
          margin-bottom: 0;

          .el-form-item__content {
            width: 120px;
          }

          .el-input--prefix .el-input__inner {
            padding-left: 28px;
          }
        }
      }
    }

    .data-chart {
      width: 100%;
      display: flex;

      .legend {
        width: 50%;

        p {
          display: flex;
          align-items: center;
          margin: 36px 0;

          .legend-color {
            display: inline-block;
            width: 10px;
            height: 14px;
            background: #5D7092;
            border-radius: 4px;
            margin: 0 20px;
          }

          .font {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            font-style: normal;
          }

          .legend-num {
            display: inline-block;
            width: 52px;
            height: 24px;
            background: rgba(93, 112, 146, 0.2);
            border-radius: 12px;
            font-weight: 400;
            font-size: 14px;
            color: #5D7092;
            line-height: 24px;
            text-align: center;
            margin: 0 50px;
          }

          .unit {
            font-weight: 400;
            font-size: 12px;
            color: #999999;
            line-height: 17px;
            font-style: normal;
          }
        }
      }

      .chart {
        width: 50%;
      }
    }

    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background: #fff !important;
    }
  }

  .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../../assets/images/bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 26px;
    margin-bottom: 16px;

    .person-info {
      display: flex;
      flex-direction: column;
      justify-content: center;

      h3 {
        margin: 0;
        color: #333333;
        font-weight: 500;
        font-style: normal;
        font-size: 28px;
        line-height: 40px;
      }

      label {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
    }

    .info {
      display: flex;

      .head-image {
        width: 90px;
        height: 90px;
        border: 1px solid rgba(60, 126, 255, 0.40);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 14px;

        img {
          width: 78px;
          height: 78px;
          border-radius: 50%;
        }
      }
    }

    .poject-info {
      display: flex;
      align-items: center;

      .poject-image {
        width: 102px;
        height: 102px;
        margin-right: 14px;
      }

      .person-chart {
        display: flex;
        margin-left: 20px;

        .chart {
          width: 90px;
          height: 90px;
          margin-right: 6px;
        }
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>